<template>
  <a-row type="flex" class="_modal_form">
    <a-col
      :span="24"
      v-for="({
        key,
        label,
        placeholder,
        input,
        inputNumber,
        precision = 0,
        treeInputs,
        children,
        select,
        textarea,
        switcher,
        inputAddMinus,
        selectMode = 'default',
        date,
        timePicker,
        provinceAndCity,
        group,
        maxLength,
        disabled = false,
        loadimg,
        imgMax,
        imgtype ='product',
        imgFile = 'img',
        loadimgSize=2048,
        rules = [{ required: false }],
        hidden = false
        }) in searchKeys"
      :key="key"
    >

     <template v-if="switcher && !hidden">
        <a-form-item :label="label">
          <a-switch
            size="default"
            v-decorator="[key,{ rules ,valuePropName:'checked'}]"
            @change="onSwitchChange" />
        </a-form-item>
      </template>
      <template v-if="treeInputs && !hidden">
        <a-form-item  :label="label" required>
          <a-row type="flex" :gutter="0">
            <a-col
              v-for="{
                childKey,
                childLabel,
                childPlaceholder,
                childRules,
                childSizeType = 'default'
              } in children"
              :key="childKey"
              :span="8"
            >
              <a-form-item :label="childLabel">
                <a-input
                  :size="childSizeType"
                  :placeholder="childPlaceholder"
                  v-decorator="[ childKey, { rules: childRules }]"
                ></a-input>
              </a-form-item>
            </a-col>
        </a-row>
        </a-form-item>
      </template>
      
      <template v-if="provinceAndCity && !hidden">
        <a-form-item  :label="label" required> 
          <a-row type="flex" class="_formItems_province" :gutter="0" style="margin-bottom:0!important;">
            <a-col
              v-for="{
                childKey,
                childLabel,
                childPlaceholder,
                childRules,
                childDisabled = false,
                childSizeType = 'default'
              } in children"
              :key="childKey"
              class="_formItems_province_col"
            >
              <a-form-item :label="childLabel" style="margin-bottom:0;">
                <a-select
                  :size="childSizeType"
                  :disabled="childDisabled"
                  :placeholder="childPlaceholder"
                  class="_formItems_province_action"
                  @change="(value, option) => onAddressChange(option, childKey)"
                  v-decorator="[childKey, { rules: childRules }]"
                >
                  <a-select-option
                    v-for="item in getDataWithKey(childKey)"
                    :value="item.value"
                    :key="item.key"
                  >{{ item.value }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
      </template>

      <template v-if="textarea && !hidden">
        <a-form-item :label="label">
          <a-input
            size="default"
            :placeholder="placeholder"
            :maxLength="maxLength"
            :disabled="disabled"
            type="textarea"
            style="height: 60px"
            v-decorator="[ key,{ rules }]"
            @change="e => {e.target.value = e.target.value.trim();return e}"
          />
        </a-form-item>
      </template>
      <template v-if="timePicker && !hidden">
        <a-form-item :label="label">
          <a-time-picker 
            show-time
            size="default"
            @change="onDateChange"
            :placeholder="placeholder"
            :disabledDate="disabledDate"
            v-decorator="[key, { rules }]"
          />
        </a-form-item>
      </template>
      <template v-if="date && !hidden">
        <a-form-item :label="label">
          <a-date-picker 
            show-time
            size="default"
            @change="onDateChange"
            :placeholder="placeholder"
            :disabledDate="disabledDate"
            v-decorator="[key, { rules }]"
          />
        </a-form-item>
      </template>
      <template v-if="group && !hidden">
        <a-form-item :label="label">
          <a-radio-group v-decorator="[key, { rules }]" @change="e => groupChange(e, key)">
            <a-radio
              v-for="(item, index) in getDataWithKey(key)"
              :key="item.id + index"
              :value="item.id"
            >{{ item.name }}</a-radio>
          </a-radio-group>
        </a-form-item>
      </template>
      <template v-if="input && !hidden">
        <a-form-item :label="label">
          <a-input
            size="default"
            :placeholder="placeholder"
            :maxLength="maxLength"
            :disabled="disabled"
            v-decorator="[key,{ rules }]"
          ></a-input>
        </a-form-item>
      </template>
      <template v-if="inputAddMinus && !hidden">
        <a-form-item :label="label">
          <a-input
            size="default"
            :placeholder="placeholder"
            :maxLength="maxLength"
            :disabled="disabled"
            v-decorator="[key,{ rules }]"
          >
          <a-icon slot="addonBefore" type="minus" />
          <a-icon slot="addonAfter" type="plus" />
          </a-input>
        </a-form-item>
      </template>
      <template v-if="inputNumber && !hidden">
        <a-form-item :label="label">
          <a-input-number
            size="default"
            style="width:200px"
            :placeholder="placeholder"
            :min="maxLength"
            :precision="precision"
            :disabled="disabled"
            v-decorator="[key,{ rules }]"
          ></a-input-number>
        </a-form-item>
      </template>
      <template v-if="select && !hidden">
        <a-form-item :label="label">
          <a-select
            size="default"
            :mode="selectMode"
            :placeholder="placeholder"
            v-decorator="[key,{ rules }]"
          >
            <a-select-option
              v-for="(item, index) in getDataWithKey(key)"
              :value="item.key"
              :key="index"
            >{{ item.value }}</a-select-option>
          </a-select>
        </a-form-item>
      </template>
      <template v-if="loadimg && !hidden">
        <a-form-item :label="label">
          <UploadImg listType="picture-card" :max="imgMax" :imgSize='loadimgSize' :imgtype="imgtype" :imgFile="imgFile"
            v-decorator="[key, { rules ,initialValue: ''}]" 
          ></UploadImg>
        </a-form-item>
      </template>
    </a-col>
  </a-row>
</template>

<script>
import UploadImg from '../UploadImg'
export default {
  name: "ModalForm",
  components:{UploadImg},
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    searchKeys: {
      type: Array,
      required: true
    },
    getDataWithKey: {
      type: Function,
      default: () => {}
    },
    onDateChange: {
      type: Function,
      default: () => {}
    },
    onAddressChange: {
      type: Function,
      default: () => {}
    },
    disabledDate: {
      type: Function,
      default: () => {}
    },
    onBlur: {
      type: Function,
      default: () => {}
    },
    onSelectChange: {
      type: Function,
      default: (id, key) => {}
    },
    groupChange: {
      type: Function,
      default: () => {}
    },
    onSwitchChange: {
      type: Function,
      default: ()=>{}
    }
  }
};
</script>